<template>
    <div id="discout">
        <div id="d1_a">
            <h3 id="h1">{{datas[1].name}}</h3>
            <div class="hh">{{datas[1].description}}</div>
            <div class="ss">立即抢购></div>
            <img class="imm" :src="datas[1].image_hash" alt="">
        </div>
        <div id="d1_b">
            <h3  id="h2">{{datas[0].name}}</h3>
            <div class="hh">{{datas[0].description}}</div>
            <div class="dd"><span>{{datas[0].count}}</span>正在抢</div>
            <img :src="datas[0].image_hash" alt="" class="imm">
        </div>
    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                datas: []
            }
        },
        methods: {
            axios() {
                axios.get('/api/icons.json').then(this.success).catch(this.errors)
            },
            success(data) {
                var items = data.data[1].entries
                var gs = 'png'
                items.forEach(element => {
                    let hash = element.image_hash
                    let str = `${hash.slice(0,1)}/${hash.slice(1,3)}/${hash.slice(3)}`
                    element.image_hash = `http://fuss10.elemecdn.com/${str}.${gs}?imageMogr/format/webp/thumbnail/!240x160r/gravity/Center/crop/240x160/`
                });
                this.datas = items
            },
            errors(err) {
                console.log(err)
            }
        },
        mounted() {
            this.axios()
        },
    }
</script>
<style lang="stylus" scoped>
#discout
    display flex
    padding 0 3vw
    #d1_a,#d1_b
        flex 1
        margin-right .8vw
        padding 3.2vw 0 0 4vw
        height: 37.333333vw;
        background linear-gradient(0deg,#f4f4f4 5%,#fafafa 95%)
        position relative
        .imm 
            width 32vw
            height 21.3vw
            position absolute
            right 0
            bottom -2vw
            z-index 0
        #h1
            font-size .453333rem
            font-weight 700
            color #000
            margin-bottom 1.3vw
        .hh
            font-size .346667rem
            color #777
            margin-bottom 2.4vw
        .ss
            font-size .32rem
            color #af8260
            font-weight 700
        #h2
            color #e81919
            font-size .453333rem
            font-weight 700
            margin-bottom 1.3vw
        .dd
            color #333
            font-size .32rem
            font-weight 700
        .dd > span
            color #e81919
</style>


